<template>
  <div v-loading="loading" class="meetingTab">
    <el-tabs v-if="menuList && menuList.length > 1" v-model="view" style="height: 100%;width: 100%" :type="types ? 'border-card' : ''" @tab-click="clickMenu">
      <el-tab-pane v-for="(item, key) in menuList" :key="key" :lazy="true" :label="$t(item.menuName)" :name="item.id">
        <component :is="menuPath" v-if="item.flag" ref="menuPath" source="sheet" />
      </el-tab-pane>
    </el-tabs>
    <div v-else>
      <component :is="menuPath" ref="menuPath" source="sheet" />
    </div>
  </div>
</template>

<script>

import { checkMtMeeting } from '@/api/meeting/mtMeeting'
import { getAsyncComponent } from '@/utils'
import { getConfigByMeetingId } from '@/api/meeting/config/mtPersonConfig'

export default {
  data() {
    return {
      view: 'mt_meeting',
      menuList: [],
      types: true,
      menuPath: undefined,
      loading: true,
      form: this.formDataValue === undefined ? {} : this.formDataValue,
      meetingId: undefined,
      formData: null,
      otherBtnHide: false
    }
  },
  computed: {
    rules: function() {
      return this.$refs.menuPath.rules
    },
    formDataValue() {
      return this.$refs.menuPath.form
    }
  },
  created() {
    this.$bus.$emit('async_done')
  },
  methods: {
    clearValidate() {
      if (this.menuList.length === 1) {
        this.$refs.menuPath.$refs.form.clearValidate()
      } else {
        this.$refs.menuPath[0].$refs.form.clearValidate()
      }
    },
    init(data) {
      console.log(data, '会议首页数据')
      this.loading = true
      this.formData = data
      if (data.wfNodeId) {
        this.types = false
      }
      if (data && data.id) {
        checkMtMeeting(data.id).then(res => {
          this.meetingId = data.id
          this.initTabs(res.data, data.id)
          this.loading = false
        })
      } else {
        this.initTabs(false, data.id)
      }
    },
    submitForm() {
      return new Promise((resolve) => {
        if (this.menuList.length === 1) {
            this.$refs.menuPath.submitForm().then(res => {
              if (res && res.data) {
                this.form = res.data
                resolve(res.data.id)
              }
            })
        } else {
          this.$refs.menuPath[0].submitForm().then(res => {
            if (res && res.data) {
              this.form = res.data
              resolve(res.data.id)
            }
          })
        }
      })
    },
    initTabs(flag, meetingId) {
      getConfigByMeetingId(meetingId).then(res => {
        console.log(res.data)
        if (flag) {
          if (res.data && res.data.voteFlag === 'Y') {
            this.menuList = [
              {
                menuName: '会议申请',
                id: 'mt_meeting',
                component: 'deal/mt/mtMeetingForm'
              },
              {
                menuName: '排会信息',
                id: 'mt_arrange_info',
                component: 'deal/mt/info/mtArrangeInfoForm'
              },
              {
                menuName: '投票信息',
                id: 'mt_vote_main',
                component: 'deal/mt/vote/mtVoteForm'
              },
              {
                menuName: '会议结论',
                id: 'mt_conclusion',
                component: 'deal/mt/conclusion/mtConclusionForm.vue'
              }
            ]
          } else {
            this.menuList = [
              {
                menuName: '会议申请',
                id: 'mt_meeting',
                component: 'deal/mt/mtMeetingForm'
              },
              {
                menuName: '排会信息',
                id: 'mt_arrange_info',
                component: 'deal/mt/info/mtArrangeInfoForm'
              },
              {
                menuName: '会议结论',
                id: 'mt_conclusion',
                component: 'deal/mt/conclusion/mtConclusionForm.vue'
              }
            ]
          }
        } else {
          this.menuList = [
            {
              menuName: '会议申请',
              id: 'mt_meeting',
              component: 'deal/mt/mtMeetingForm'
            }
          ]
        }
        this.load()
      })
    },
    load() {
      if (this.menuList.length > 0) {
        this.view = this.menuList[0].id
        this.clickMenu(this.menuList[0])
      } else {
        this.importFormPath(null)
      }
    },
    clickMenu(tab) {
      this.menuList && this.menuList.forEach(item => {
        if (item.id === tab.id || item.id === tab.name) {
          this.$nextTick(() => {
            this.$set(item, 'flag', true)
            this.importFormPath(item.component)
            this.listComponent()
          })
        } else {
          this.$set(item, 'flag', false)
        }
      })
    },
    listComponent() {
      this.$bus.$once('async_meeting_done', () => {
        this.loadComponet()
      })
    },
    async loadComponet() {
      this.$nextTick(() => {
        console.log(this.$refs.menuPath, this.$refs)
        if (this.$refs.menuPath[0]?.init) {
          this.loading = true
          this.formData.meetingId = this.meetingId
          this.formData.isCard = this.types
          this.formData.otherBtnHide = this.otherBtnHide
          var obj = JSON.parse(JSON.stringify(this.formData))
          obj.id = undefined
          this.$refs.menuPath[0].init(obj)
          this.loading = false
        }
        if (this.$refs.menuPath?.init) {
          this.loading = true
          this.formData.meetingId = this.meetingId
          this.formData.isCard = this.types
          this.formData.otherBtnHide = this.otherBtnHide
          obj = JSON.parse(JSON.stringify(this.formData))
          obj.id = undefined
          this.$refs.menuPath.init(obj)
          this.loading = false
        }
      })
    },
    // 引入组件
    importFormPath(menuPath) {
      if (menuPath) {
        this.menuPath = getAsyncComponent('@/views/' + menuPath)
      } else {
        const error = 'error/404'
        this.importFormPath(error)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.el-tabs--border-card{
  box-shadow: none !important;
}
</style>
